<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物保护管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <img src="images/logo.png" alt="logo">
                <h1>植物保护管理系统</h1>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="plants.html">植物列表</a></li>
                <li><a href="treatment.html">保护措施</a></li>
                <li><a href="#statistics">数据统计</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <h2>欢迎使用植物保护管理系统</h2>
            <p>专业的植物保护解决方案</p>
            <div class="hero-buttons">
                <a href="plants.html" class="btn primary">查看植物列表</a>
                <a href="treatment.html" class="btn secondary">查看保护措施</a>
            </div>
        </section>

        <section id="protection" class="protection-section">
            <h2>保护措施</h2>
            <div class="protection-grid">
                <div class="protection-card">
                    <img src="images/protection1.jpg" alt="农艺管理">
                    <h3>农艺管理</h3>
                    <p>科学的种植技术和栽培管理，包括整地、播种、间苗、中耕除草等关键农艺措施。</p>
                </div>
                <div class="protection-card">
                    <img src="images/protection2.jpg" alt="环境控制">
                    <h3>环境控制</h3>
                    <p>智能调节温度、湿度、光照等环境参数，为植物创造最佳生长环境。</p>
                </div>
                <div class="protection-card">
                    <img src="images/protection3.jpg" alt="病虫害防治">
                    <h3>病虫害防治</h3>
                    <p>及时发现并处理病虫害问题，采用科学的防治方法确保植物健康。</p>
                </div>
                <div class="protection-card">
                    <img src="images/protection4.jpg" alt="营养管理">
                    <h3>营养管理</h3>
                    <p>科学施肥和营养调配，满足植物在不同生长阶段的营养需求。</p>
                </div>
                <div class="protection-card">
                    <img src="images/protection5.jpg" alt="水分管理">
                    <h3>水分管理</h3>
                    <p>合理灌溉和排水措施，调控土壤水分，确保植物正常生长发育。</p>
                </div>
                <div class="protection-card">
                    <img src="images/protection6.jpg" alt="生长调节">
                    <h3>生长调节</h3>
                    <p>科学使用生长调节剂，调控植物生长发育，提高产量和品质。</p>
                </div>
            </div>
            <div class="view-more">
                <a href="treatment.html" class="btn primary">查看更多保护措施</a>
            </div>
        </section>

        <section id="statistics" class="statistics-section">
            <h2>数据统计</h2>
            <div class="statistics-overview">
                <div class="statistics-grid">
                    <div class="stat-card highlight">
                        <div class="stat-icon plant-icon">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" data-value="1000">1000+</div>
                            <div class="stat-label">植物品种</div>
                            <div class="stat-desc">覆盖各类农作物、经济作物</div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-up">↑ 12.5%</span>
                            <span class="trend-period">年增长率</span>
                        </div>
                    </div>
                    <div class="stat-card highlight">
                        <div class="stat-icon success-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" data-value="98">98%</div>
                            <div class="stat-label">成活率</div>
                            <div class="stat-desc">科学管理确保植物健康生长</div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-up">↑ 5.2%</span>
                            <span class="trend-period">较去年</span>
                        </div>
                    </div>
                    <div class="stat-card highlight">
                        <div class="stat-icon monitor-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">24/7</div>
                            <div class="stat-label">监控时间</div>
                            <div class="stat-desc">全天候自动化监测系统</div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-stable">↔ 稳定运行</span>
                            <span class="trend-period">全年无休</span>
                        </div>
                    </div>
                    <div class="stat-card highlight">
                        <div class="stat-icon user-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" data-value="5000">5000+</div>
                            <div class="stat-label">用户信任</div>
                            <div class="stat-desc">来自全国各地的种植户</div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-up">↑ 25.8%</span>
                            <span class="trend-period">年增长率</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="statistics-details">
                <div class="stat-section">
                    <h3>植物保护成效</h3>
                    <div class="stat-detail-grid">
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h4>病虫害防治</h4>
                            <div class="detail-number counter" data-value="95">95%</div>
                            <p>防治成功率</p>
                            <div class="progress-bar">
                                <div class="progress" style="width: 95%"></div>
                            </div>
                        </div>
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h4>产量提升</h4>
                            <div class="detail-number counter" data-value="30">30%</div>
                            <p>平均增产比例</p>
                            <div class="progress-bar">
                                <div class="progress" style="width: 30%"></div>
                            </div>
                        </div>
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-leaf"></i>
                            </div>
                            <h4>农药使用</h4>
                            <div class="detail-number counter" data-value="40">-40%</div>
                            <p>减少使用量</p>
                            <div class="progress-bar">
                                <div class="progress decrease" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stat-section">
                    <h3>系统服务能力</h3>
                    <div class="stat-detail-grid">
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-stethoscope"></i>
                            </div>
                            <h4>在线诊断</h4>
                            <div class="detail-number">10万+</div>
                            <p>月均诊断次数</p>
                            <div class="service-indicator">
                                <span class="dot active"></span>
                                <span>实时服务中</span>
                            </div>
                        </div>
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-user-md"></i>
                            </div>
                            <h4>专家团队</h4>
                            <div class="detail-number">200+</div>
                            <p>专业技术人员</p>
                            <div class="expertise-tags">
                                <span class="tag">农艺师</span>
                                <span class="tag">植保专家</span>
                            </div>
                        </div>
                        <div class="detail-card">
                            <div class="detail-icon">
                                <i class="fas fa-map-marked-alt"></i>
                            </div>
                            <h4>服务区域</h4>
                            <div class="detail-number">28个</div>
                            <p>覆盖省份</p>
                            <div class="coverage-map">
                                <div class="map-indicator"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stat-section">
                    <h3>环境效益</h3>
                    <div class="stat-detail-grid">
                        <div class="detail-card eco-card">
                            <div class="detail-icon">
                                <i class="fas fa-tint"></i>
                            </div>
                            <h4>节水灌溉</h4>
                            <div class="detail-number counter" data-value="35">35%</div>
                            <p>用水节省率</p>
                            <div class="eco-indicator">
                                <div class="water-drop"></div>
                            </div>
                        </div>
                        <div class="detail-card eco-card">
                            <div class="detail-icon">
                                <i class="fas fa-spa"></i>
                            </div>
                            <h4>土壤改良</h4>
                            <div class="detail-number">50万亩</div>
                            <p>改良面积</p>
                            <div class="eco-indicator">
                                <div class="soil-quality"></div>
                            </div>
                        </div>
                        <div class="detail-card eco-card">
                            <div class="detail-icon">
                                <i class="fas fa-leaf"></i>
                            </div>
                            <h4>绿色防控</h4>
                            <div class="detail-number counter" data-value="80">80%</div>
                            <p>绿色防控覆盖率</p>
                            <div class="eco-indicator">
                                <div class="green-shield"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="about" class="about-section">
            <h2>关于我们</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <i class="icon management"></i>
                    <h3>专业管理</h3>
                    <p>提供专业的植物养护建议和管理方案，确保植物健康生长。</p>
                    <ul class="feature-list">
                        <li>定制化养护方案</li>
                        <li>专家在线指导</li>
                        <li>生长周期追踪</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <i class="icon analysis"></i>
                    <h3>数据分析</h3>
                    <p>科学的数据统计和生长分析，帮助优化养护策略。</p>
                    <ul class="feature-list">
                        <li>生长数据记录</li>
                        <li>环境参数监测</li>
                        <li>趋势分析报告</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <i class="icon monitor"></i>
                    <h3>实时监控</h3>
                    <p>植物生长状况实时监测，及时发现并解决问题。</p>
                    <ul class="feature-list">
                        <li>24小时监控</li>
                        <li>异常预警</li>
                        <li>远程查看</li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>联系我们</h3>
                <p>电话：123-456-7890</p>
                <p>邮箱：info@plant-system.com</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="plants.html">植物列表</a></li>
                    <li><a href="treatment.html">保护措施</a></li>
                    <li><a href="#about">关于我们</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 植物保护管理系统 版权所有</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>
